<!DOCTYPE html>
<html lang="zh_CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="jquery-3.7.0.min.js"></script>
    <script src="echarts.min.js"></script>
    <style>
        .centerMap {
            width: 800px;
            height: 500px;
            margin: 0 auto;
        }
    </style>
</head>

<body>
    <div class="centerMap" id="centerMap"></div>
</body>
<script>
    $(function () {
        var mapdom = document.getElementById('centerMap');
        var myChart = echarts.init(mapdom);
        myChart.showLoading();
        $.getJSON("./suzhou.json", function (res) {
            myChart.hideLoading();
            echarts.registerMap('苏州', res);
            var option = {
                tooltip: {
                    show: false,
                },
                toolbox: {
                    show: false
                },
                geo: {
                    tooltip: {
                        show: false,
                    },
                    map: '苏州',
                    roam: false,
                    zoom: 1.2,
                    projection: {
                        project: (point) => [point[0] / 180 * Math.PI, -Math.log(Math.tan((Math.PI / 2 + point[1] / 180 * Math.PI) / 2))],
                        unproject: (point) => [point[0] * 180 / Math.PI, 2 * 180 / Math.PI * Math.atan(Math.exp(point[1])) - 90]
                    },
                    label: {
                        show: true,
                        color: '#ffffff',
                    },
                    itemStyle: {
                        areaColor: '#1B3378',
                        borderColor: "#6190FB",
                        borderWidth: 1,
                        shadowColor: "#1A3787",
                        shadowOffsetX: 0,
                        shadowOffsetY: 7,
                        shadowBlur: 2,
                    },
                    emphasis: {
                        label: {
                            show: true,
                            color: '#ffffff',
                        },
                        itemStyle: {
                            areaColor: '#1A3787',
                            color: "#ffffff",
                        },
                    },
                },
                series: {
                    type: 'effectScatter',
                    coordinateSystem: 'geo',
                    geoIndex: 0,
                    symbolSize: 10,
                    symbolOffset: [0, 20],
                    encode: {
                        tooltip: 2,
                        label: 2
                    },
                    itemStyle: {
                        color: '#d40000'
                    },
                    // hover这边的侧边信息是可以的
                    tooltip: {
                        show: true,
                        formatter: (params) => {
                            console.log(params.data[3])
                            const obj = params.value[3]
                            return `${obj.name + obj.address}`;
                        },
                    },
                    //这边选择之后的样式会有问题 
                    select: {
                        label: {
                            show: true,
                            // offset: [20, '-50%'],
                            position: 'right',
                            backgroundColor: '#ffffff',
                            padding: [5, 10, 5, 10],
                            color: '#444444',
                            borderRadius: 5,
                            fontSize: 12,
                            overflow: 'break',
                            align: 'left',
                            // width: 150,
                            formatter: (params) => {
                                console.log(params.data[3])
                                const obj = params.value[3]
                                return `${obj.name}`;
                            },
                        },
                    },
                    selectedMode: 'single',
                    //这边是自定义数据   具体的数据放在后面
                    data: [
                        [120.41453, 31.342948, 100, { name: '虎丘区', address: '苏州市' }],
                        [120.369662, 31.164625, 30, { name: '吴中区', address: '苏州市' }],
                        [120.631082, 31.44481, 80, { name: '姑苏区', address: '苏州市' }],
                        [120.597994, 31.318955, 61, { name: '吴江区', address: '苏州市' }],
                        [120.63197, 31.008452, 70, { name: '常熟市', address: '苏州市' }],
                        [120.822992, 31.658797, 81, { name: '张家港市', address: '苏州市' }]
                    ],
                    dimensions: ['lng', 'lat', 'value', 'data'],
                }

            };
            myChart.setOption(option);
        });
    });
</script>

</html>